<template>
  <view class="profile-wrapper">
    <view class="profile-inner">
      <view class="profile-info">
        <view class="info-left">
          <view class="info-avatar">
            <u-image error-icon="account" :src="userInfo.avatar" width="60px" height="60px" shape="circle">
              <!-- <template v-slot:error> -->
                <!-- <u-image shape="circle"  height="60px" width="60px" src="@/static/icons/default-avatar.png"></u-image> -->
                
              <!-- </template> -->
            </u-image>
          </view>
          <view class="info-name">
            <view class="user-name">{{ userInfo.nickName || '微信用户'}} <image v-if="userInfo.is_svip === 1" mode="widthFix" class="svip_icon" :src="`${baseUrl}/avatar-client/images/svip_icon.png`"></image></view>
            <view class="user-id">
              <hm-copy-text :value="userInfo._id" color="#ffffff" :showCopyBtn="false"></hm-copy-text>
            </view>
          </view>
        </view>
        <!-- <view class="info-right">
					<u-icon name="edit-pen" color="#fff" size="28"></u-icon> 完善信息
				</view> -->
      </view>
      <view class="user-income" @click="goWallet">
        <view class="income-item">
          <view class="income-num">{{ vk.pubfn.priceFilter(userInfo.total_revenue)}}</view>
          <view class="income-label">总收益</view>
        </view>
        <view class="income-item">
          <view class="income-num">{{ vk.pubfn.priceFilter(userInfo.balance)}}</view>
          <view class="income-label">余额</view>
        </view>
        <view class="income-item">
          <view class="income-num">{{ vk.pubfn.priceFilter(userInfo.todayIncome)}}</view>
          <view class="income-label">今日收益</view>
        </view>
      <!--  <view class="go-wallet">
          <u-icon name="arrow-right"></u-icon>
        </view> -->
      </view>
    </view>
  </view>
</template>
<script setup>
  import { ref } from 'vue'
  const baseUrl = vk.getVuex('$app.config.staticUrl.baseUrl');
  
  const props = defineProps({
    userInfo: {
      type: Object,
      default: {
        total_revenue: 0,
        balance: 0,
        todayIncome: 0
      }
    }
  })
  const goWallet = () => {
    // vk.navigateTo('/pages/wallet/wallet');
  }
</script>
<style lang="scss">
  .profile-wrapper {
    height: 484rpx;
    // background: rgba(52, 123, 241, 1) url("https://appstore-cdn-bd.coolpad.com/lord/png/Fq1l9hXxWaProl0RhyxsyPEXSpKVvjXh.png") no-repeat;
    // background-position: center;
    // background: linear-gradient(177.16deg, rgba(182, 190, 207, 1) 0%, rgba(188, 195, 212, 0.81) 33.13%, rgba(202, 206, 219, 0.38) 69.08%, rgba(245, 245, 245, 0.01) 100%);
    background: linear-gradient(177.16deg, rgba(#FF6A60, 1) 10%, rgba(#FF6A60, 0.81) 40.13%, rgba(#FF6A60, 0.38) 75.08%, rgba(#FF6A60, 0.01) 100%);

    .profile-inner {
      padding: 0 30rpx;
      padding-top: 168rpx;
      color: #fff;

      .profile-info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .info-left {
          display: flex;

          .info-name {
            font-size: 30rpx;
            margin-left: 30rpx;
            padding: 10rpx 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .svip_icon {
              width: 56rpx;
            }
          }
        }

        .info-right {
          font-size: 24rpx;
        }
      }

      .user-income {
        height: 194rpx;
        border-radius: 24rpx;
        background: rgba(#FF6A60, 0.7);
        box-shadow: 0px 4rpx 74rpx rgba(0, 0, 0, 0.09);
        backdrop-filter: blur(50rpx);
        margin-top: 50rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .income-item {
          width: 33.333%;
          text-align: center;

          .income-num {
            font-size: 48rpx;
            font-weight: 700;
          }

          .income-label {
            font-size: 28rpx;
            margin-top: 16rpx;
          }
        }
        .go-wallet {
          width: 54rpx;
          font-size: 40rpx;
        }
      }
    }
  }
</style>